<template>
    <div>
      <el-row>
          <el-col :span="24">
              <div class="header">

              </div>
          </el-col>
          <el-col :span="4">
              <div class="main"></div>
          </el-col>
      </el-row>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'

import { getMenuNodeList, getRoleMenus, allocateRoleMenus } from '@/service/menu'
import { Tree } from 'element-ui/types'
export default Vue.extend({
  data () {
    return {
      props: {
        label: 'name',
        children: 'subMenuList'
      },
      muneData: [],
      defaultChecked: []
    }
  },
  methods: {
    async getMenu () {
      const { data } = await getMenuNodeList()
      this.muneData = data.data
    },
    async saveMenu () {
      const { data } = await allocateRoleMenus({ roleId: this.$route.params.roleId, menuIdList: (this.$refs.treeMenu as Tree).getCheckedKeys() })
      if (data.code === '000000') {
        this.$message.success(data.mesg)
        this.$router.push({ name: 'role' })
      } else {
        this.$message.error(data.mesg)
      }
    },
    cleanMenu () {
      (this.$refs.treeMenu as Tree).setCheckedKeys([{ nodeKey: null }])
    },
    async loadRoleMenu () {
      const { data } = await getRoleMenus(this.$route.params.roleId)
      this.getCheckedKeys(data.data)
      console.log(this.defaultChecked)
    },
    getCheckedKeys (menus:any) {
      menus.forEach((menu:any) => {
        if (menu.selected && !menu.subMenuList) {
          console.log('push方法执行')
          this.defaultChecked = [...this.defaultChecked, menu.id] as any
        }
        if (menu.subMenuList) {
          this.getCheckedKeys(menu.subMenuList)
        }
      })
    }
  },
  created () {
    this.getMenu()
    this.loadRoleMenu()
  }
})
</script>
<style scoped lang="scss">
  .header{
      border:1px solid red;
      height:40px;
  }
  .main{
      border:1px solid green
  }
</style>
